<{extend name="Public:public" /}>

<{block name="title"}>从 Vuex 0.6.x 迁移到 1.0<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar migration-vuex-guide">
  
    
      <div id="ad">
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
  <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/?utm_source=vue.js&amp;utm_content=ad1116" target="_blank">
    <img src="/images/coding-net-ad.jpg">
  </a>
</div>

    
  
  
    <h1>从 Vuex 0.6.x 迁移到 1.0</h1>
  
  
    <blockquote>
<p>Vuex 2.0 已经发布了，但是这份指南只涵盖迁移到 1.0？这是打错了吗？此外，似乎 Vuex 1.0 和 2.0 也同时发布。这是怎么回事？我该用哪一个并且哪一个兼容 Vue 2.0呢？</p>
</blockquote>
<p>Vuex 1.0 和 2.0 如下：</p>
<ul>
<li>都完全支持 Vue 1.0 和 2.0</li>
<li>将在可预见的未来保留支持</li>
</ul>
<p>然而它们的目标用户稍微有所不同。</p>
<p><strong>Vuex 2.0</strong> 从根本上重新设计并且提供简洁的 API，用于帮助正在开始一个新项目的用户，或想要用客户端状态管理前沿技术的用户。<strong>此迁移指南不涵盖 Vuex 2.0 相关内容</strong>，因此如果你想了解更多，请查阅 <a href="https://vuex.vuejs.org/zh-cn/" target="_blank" rel="noopener">Vuex 2.0 文档</a>。</p>
<p><strong>Vuex 1.0</strong> 主要是向下兼容，所以升级只需要很小的改动。推荐拥有大量现存代码库的用户，或只想尽可能平滑升级 Vue 2.0 的用户。这份指南致力促进这一过程，但仅包括迁移说明。完整使用指南请查阅 <a href="https://github.com/vuejs/vuex/tree/1.0/docs/zh-cn" target="_blank" rel="noopener">Vuex 1.0 文档</a>。</p>
<h2 id="带字符串属性路径的-store-watch-替换"><a href="#带字符串属性路径的-store-watch-替换" class="headerlink" title="带字符串属性路径的 store.watch 替换" data-scroll="">带字符串属性路径的 <code>store.watch</code> <sup>替换</sup></a></h2><p><code>store.watch</code> 现在只接受函数。因此，下面例子你需要替换：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">store.watch(<span class="string">'user.notifications'</span>, callback)</span><br></pre></td></tr></tbody></table></figure>
<p>为：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">store.watch(</span><br><span class="line">  <span class="comment">// 当返回结果改变...</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> (<span class="params">state</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> state.user.notifications</span><br><span class="line">  },</span><br><span class="line">  <span class="comment">// 执行回调函数</span></span><br><span class="line">  callback</span><br><span class="line">)</span><br></pre></td></tr></tbody></table></figure>
<p>这帮助你更加完善的控制那些需要监听的响应式属性。</p>

<div class="upgrade-path">
  <h4>升级方法</h4>
  <p>在代码库运行<a href="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="noopener">迁移工具</a>，查找在 <code>store.watch</code> 中使用字符串作为第一个参数的事例。</p>
</div>

<h2 id="Store-的事件触发器-移除"><a href="#Store-的事件触发器-移除" class="headerlink" title="Store 的事件触发器 移除" data-scroll="">Store 的事件触发器 <sup>移除</sup></a></h2><p>store 实例不再暴露事件触发器 (event emitter) 接口 (<code>on</code>, <code>off</code>, <code>emit</code>)。如果你之前使用 store 作为全局的 event bus，迁移说明相关内容请查阅<a href="migration.html#dispatch-和-broadcast-替换">此章节</a>。</p>
<p>为了替换正在使用观察 store 自身触发事件的这些接口，(例如：<code>store.on('mutation', callback)</code>)，我们引入新的方法 <code>store.subscribe</code>。在插件中的典型使用方式如下：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myPlugin = <span class="function"><span class="params">store</span> =&gt;</span> {</span><br><span class="line">  store.subscribe(<span class="function"><span class="keyword">function</span> (<span class="params">mutation, state</span>) </span>{</span><br><span class="line">    <span class="comment">// Do something...</span></span><br><span class="line">  })</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>更多信息请查阅<a href="https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md" target="_blank" rel="noopener">插件文档</a>的示例。</p>

<div class="upgrade-path">
  <h4>升级方式</h4>
  <p>在代码库运行<a href="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="noopener">迁移工具</a>，查找使用了 <code>store.on</code>, <code>store.off</code>, <code>store.emit</code> 的事例。</p>
</div>

<h2 id="中间件-替换"><a href="#中间件-替换" class="headerlink" title="中间件 替换" data-scroll="">中间件 <sup>替换</sup></a></h2><p>中间件被替换为插件。插件是接收 store 作为仅有参数的基本函数，能够监听 store 中的 mutation 事件：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> myPlugins = <span class="function"><span class="params">store</span> =&gt;</span> {</span><br><span class="line">  store.subscribe(<span class="string">'mutation'</span>, (mutation, state) =&gt; {</span><br><span class="line">    <span class="comment">// Do something...</span></span><br><span class="line">  })</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>更多详情，请查阅 <a href="https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md" target="_blank" rel="noopener">插件文档</a>。</p>

<div class="upgrade-path">
  <h4>升级方法</h4>
  <p>在代码库运行<a href="https://github.com/vuejs/vue-migration-helper" target="_blank" rel="noopener">迁移工具</a>，查找使用了 <code>middlewares</code> 选项的事例。</p>
</div>


  
  
    <div class="guide-links">
      
      
        <span>← <a href="/v2/guide/migration-vue-router.html">从 Vue Router 0.7.x 迁移</a></span>
      
      
      
        <span style="float: right;"><a href="/v2/guide/comparison.html">对比其他框架</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/migration-vuex.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
<{/block}>
